<template>
  <view>
    <u-navbar title="座位预约" auto-back fixed placeholder></u-navbar>
    <view class="content">
      <u-form :model="form" :rules="rules" ref="form" label-position="left" label-width="80px">
        <u-form-item label="座位号：" prop="seat">
          <u-input v-model="form.seat" placeholder="座位号" disabled></u-input>
        </u-form-item>
        <u-form-item label="开始时间：" prop="startTime">
          <u-input v-model="form.startTime" placeholder="开始时间" disabled @click="show = true"></u-input>
        </u-form-item>
        <u-form-item label="结束时间：" prop="endTime">
          <u-input disabled v-model="form.endTime" placeholder="结束时间" @click="show = true"></u-input>
        </u-form-item>
      </u-form>
      <view class="submitBtn" @click="handleSubmit()">提交</view>
    </view>

    <u-calendar :show="show" mode="range" title="预约时长" color="#00a679"
    @close="show = false" @confirm="selectTime"></u-calendar>
  </view>
</template>

<script>
import {
  addStudyLog
} from '@/api/study'
export default {
  data() {
    return {
      form: {
        seat: '',
        startTime: '',
        endTime: ''
      },
      rules: {
        seat: [
          { required: true, message: '请选择座位' }
        ],
        startTime: [
          { required: true, message: '请选择时间' }
        ],
        endTime: [
          { required: true, message: '请选择时间' }
        ]
      },
      show: false
    }
  },
  methods: {
    selectTime(val) {
      this.show = false
      this.form.startTime = val[0]
      this.form.endTime = val[val.length - 1]
    },
    handleSubmit() {
      this.form.uid = this.$store.getters.id
      this.$refs.form.validate().then(valid => {
        addStudyLog(this.form).then(res => {
          this.$toast.show({
            msg: res.msg
          })
          if(res.code === 200) {
            setTimeout(() => {
              uni.navigateBack({
                delta: 2
              })
            }, 300)
          }
        })
      })
    }
  },
  onLoad(options) {
    const item = JSON.parse(options.item)
    this.form.sid = item.sid
    this.$set(this.form, 'seat', item.no)
  }
}
</script>

<style lang="scss" scoped>
.u-form {
  padding: 10px;
  box-sizing: border-box;

  &::v-deep .u-input {
    background-color: transparent !important;
  }
}
</style>